<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Update the vote</title>

<!--睡觉小猫  -->
<style>
@
keyframes tail { 6.6666666667% {
	transform: rotate(0);
}

10%
{
transform
:
 
rotate
(10deg);

  
}
16
.6666666667 % {
	transform: rotate(-5deg);
}

20%
{
transform
:
 
rotate
(30deg);

  
}
26
.6666666667 % {
	transform: rotate(-2deg);
}

46
.6666666667 % {
	transform: rotate(10deg);
}

53
.3333333333 % {
	transform: rotate(-5deg);
}

56
.6666666667 % {
	transform: rotate(10deg);
}

}
@
keyframes body { 6.6666666667% {
	transform: scaleY(1);
}

10%
{
transform
:
 
scaleY
(1
.15
);

  
}
16
.6666666667 % {
	transform: scaleY(1);
}

20%
{
transform
:
 
scaleY
(1
.25
);

  
}
26
.6666666667 % {
	transform: scaleY(1);
}

46
.6666666667 % {
	transform: scaleY(1.15);
}

53
.3333333333 % {
	transform: scaleY(1);
}

56
.6666666667 % {
	transform: scaleY(1.15);
}

}
@
keyframes left-whisker { 6.6666666667% {
	transform: rotate(0);
}

10%
{
transform
:
 
rotate
(0deg);

  
}
16
.6666666667 % {
	transform: rotate(-5deg);
}

20%
{
transform
:
 
rotate
(0deg);

  
}
26
.6666666667 % {
	transform: rotate(0deg);
}

46
.6666666667 % {
	transform: rotate(10deg);
}

53
.3333333333 % {
	transform: rotate(-5deg);
}

56
.6666666667 % {
	transform: rotate(10deg);
}

}
@
keyframes right-whisker { 6.6666666667% {
	transform: rotate(180deg);
}

10%
{
transform
:
 
rotate
(190deg);

  
}
16
.6666666667 % {
	transform: rotate(180deg);
}

20%
{
transform
:
 
rotate
(175deg);

  
}
26
.6666666667 % {
	transform: rotate(190deg);
}

46
.6666666667 % {
	transform: rotate(180deg);
}

53
.3333333333 % {
	transform: rotate(185deg);
}

56
.6666666667 % {
	transform: rotate(175deg);
}

}
@
keyframes left-ear { 0% {
	transform: rotate(-20deg);
}

6
.6666666667 % {
	transform: rotate(-6deg);
}

13
.3333333333 % {
	transform: rotate(-15deg);
}

26
.6666666667 % {
	transform: rotate(-15deg);
}

33
.3333333333 % {
	transform: rotate(-30deg);
}

40%
{
transform
:
 
rotate
(-30deg);

  
}
46
.6666666667 % {
	transform: rotate(0deg);
}

53
.3333333333 % {
	transform: rotate(0deg);
}

60%
{
transform
:
 
rotate
(-15deg);

  
}
80%
{
transform
:
 
rotate
(-15deg);

  
}
93
.3333333333 % {
	transform: rotate(-6deg);
}

100%
{
transform
:
 
rotateZ
(-6deg);

  
}
}
@
keyframes right-ear { 0% {
	transform: rotateZ(-16deg);
}

6
.6666666667 % {
	transform: rotateZ(-16deg);
}

13
.3333333333 % {
	transform: rotateZ(-19deg);
}

26
.6666666667 % {
	transform: rotateZ(-19deg);
}

33
.3333333333 % {
	transform: rotateZ(-30deg);
}

36
.6666666667 % {
	transform: rotateZ(-19deg);
}

37
.3333333333 % {
	transform: rotateZ(-30deg);
}

38%
{
transform
:
 
rotateZ
(-19deg);

  
}
40%
{
transform
:
 
rotateZ
(-19deg);

  
}
40
.6666666667 % {
	transform: rotateZ(-30deg);
}

41
.3333333333 % {
	transform: rotateZ(-19deg);
}

46
.6666666667 % {
	transform: rotateZ(-9deg);
}

53
.3333333333 % {
	transform: rotateZ(-9deg);
}

60%
{
transform
:
 
rotateZ
(-19deg);

  
}
60
.6666666667 % {
	transform: rotateZ(-30deg);
}

61
.3333333333 % {
	transform: rotateZ(-19deg);
}

62
.6666666667 % {
	transform: rotateZ(-19deg);
}

63
.3333333333 % {
	transform: rotateZ(-30deg);
}

64%
{
transform
:
 
rotateZ
(-19deg);

  
}
80%
{
transform
:
 
rotateZ
(-19deg);

  
}
93
.3333333333 % {
	transform: rotateZ(-16deg);
}

100%
{
transform
:
 
rotateZ
(-16deg);

  
}
}
body {
	background-color: #abe7db;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

.main {
	height: 400px;
	width: 400px;
	position: relative;
}

.main .stand {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%);
	height: 20px;
	width: 200px;
	border-radius: 20px;
	background-color: #fd6e72;
	z-index: 2;
}

.main .stand::after {
	content: "";
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translate(-50%);
	height: 10px;
	width: 50px;
	border-radius: 20px;
	background-color: #fdf9de;
	box-shadow: 0 10px 0 #fdf9de, 0 20px 0 #fdf9de, 0 30px 0 #fdf9de, 0 40px
		0 #fdf9de, 0 50px 0 #fdf9de, 0 60px 0 #fdf9de, 0 70px 0 #fdf9de, 0
		80px 0 #fdf9de, 0 90px 0 #fdf9de, 0 100px 0 #fdf9de, 0 110px 0 #fdf9de,
		0 120px 0 #fdf9de, 0 130px 0 #fdf9de, 0 140px 0 #fdf9de, 0 150px 0
		#fdf9de, 0 160px 0 #fdf9de, 0 170px 0 #fdf9de;
}

.main .cat {
	width: 110px;
	height: 50px;
	position: absolute;
	top: calc(50% - 50px);
	right: 130px;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
}

.main .cat .body {
	width: 110px;
	height: 50px;
	background-color: #745260;
	position: absolute;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	animation: body 12s none infinite;
}

.main .cat .head {
	content: "";
	width: 70px;
	height: 35px;
	background-color: #745260;
	position: absolute;
	top: calc(50% - 10px);
	left: -40px;
	border-top-left-radius: 80px;
	border-top-right-radius: 80px;
}

.tail-container {
	position: absolute;
	right: 0;
	bottom: -13px;
	z-index: 3;
}

.tail {
	position: absolute;
	height: 30px;
	width: 14px;
	bottom: -10px;
	right: 0;
	border-bottom-right-radius: 5px;
	background: #745260;
	z-index: 0;
}

.tail>.tail {
	animation: tail 12s none infinite;
	height: 100%;
	width: 14px;
	transform-origin: left;
	border-bottom-left-radius: 20px 20px;
	border-bottom-right-radius: 20px 20px;
	border-top-right-radius: 40px;
}

.ear {
	position: absolute;
	left: 4px;
	top: -4px;
	width: 0;
	height: 0;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	border-bottom: 20px solid #745260;
	transform: rotate(-30deg);
	animation: left-ear 12s both infinite;
}

.ear+.ear {
	animation: right-ear 12s both infinite;
	top: -12px;
	left: 30px;
}

.nose {
	position: absolute;
	bottom: 10px;
	left: -10px;
	background-color: #fd6e72;
	height: 5px;
	width: 5px;
	border-radius: 50%;
}

.whisker-container {
	position: absolute;
	bottom: 5px;
	left: -36px;
	width: 20px;
	height: 10px;
	transform-origin: right;
	animation: left-whisker 12s both infinite;
}

.whisker-container:nth-child(2) {
	left: -20px;
	bottom: 12px;
	transform-origin: right;
	transform: rotate(180deg);
	animation: right-whisker 12s both infinite;
}

.whisker {
	position: absolute;
	top: 0;
	width: 100%;
	border: 1px solid #fdf9de;
	transform-origin: 100% 0;
	transform: rotate(10deg);
}

.whisker:last-child {
	top: 0;
	transform: rotate(-20deg);
}
</style>
</head>
<body>

	<div class="main">
		<span class="stand"></span>
		<div class="cat">
			<div class="body"></div>
			<div class="head">
				<div class="ear"></div>
				<div class="ear"></div>
			</div>
			<div class="face">
				<div class="nose"></div>
				<div class="whisker-container">
					<div class="whisker"></div>
					<div class="whisker"></div>
				</div>
				<div class="whisker-container">
					<div class="whisker"></div>
					<div class="whisker"></div>
				</div>
			</div>
			<div class="tail-container">
				<div class="tail">
					<div class="tail">
						<div class="tail">
							<div class="tail">
								<div class="tail">
									<div class="tail">
										<div class="tail"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div style="text-align: center;"></div>
	
	<!--修改表单  -->
	<form>
  <div class="form-group">
    <p>修改功能懒得做了，嘤嘤嘤!</p>
  </div>
</form>
	
</body>
</html>